<script setup>
import { ref } from 'vue'

const cabins = ref([
  {
    id: 1,
    name: 'A区域',
    status: '正常',
    temperature: 25,
    humidity: 60,
    devices: ['温控器', '加湿器']
  }
])

const activeCabin = ref(null)

const switchCabin = (cabin) => {
  activeCabin.value = cabin
}

const controlDevice = (device, action) => {
  // 控制设备
}
</script>

<template>
  <div class="cabin-management">
    <el-row :gutter="20">
      <!-- 舱体列表 -->
      <el-col :span="6">
        <el-card>
          <template #header>舱体列表</template>
          <el-menu
            :default-active="activeCabin?.id"
            @select="switchCabin">
            <el-menu-item 
              v-for="cabin in cabins"
              :key="cabin.id"
              :index="cabin.id">
              {{ cabin.name }}
            </el-menu-item>
          </el-menu>
        </el-card>
      </el-col>

      <!-- 舱体详情 -->
      <el-col :span="18">
        <el-card v-if="activeCabin">
          <template #header>
            <div class="card-header">
              <span>{{ activeCabin.name }}</span>
              <el-tag :type="activeCabin.status === '正常' ? 'success' : 'danger'">
                {{ activeCabin.status }}
              </el-tag>
            </div>
          </template>
          
          <!-- 环境数据 -->
          <el-descriptions border>
            <el-descriptions-item label="温度">
              {{ activeCabin.temperature }}°C
            </el-descriptions-item>
            <el-descriptions-item label="湿度">
              {{ activeCabin.humidity }}%
            </el-descriptions-item>
          </el-descriptions>

          <!-- 设备控制 -->
          <div class="device-control mt-4">
            <h3>设备控制</h3>
            <el-button-group>
              <el-button 
                v-for="device in activeCabin.devices"
                :key="device"
                @click="controlDevice(device, 'on')">
                {{ device }}
              </el-button>
            </el-button-group>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<style scoped>
.cabin-management {
  padding: 20px;
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.mt-4 {
  margin-top: 20px;
}
</style>